<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 

    Vue中使用组件的三大步骤：
      1.定义组件
      2.注册组件
      3.使用组件
    使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
						区别如下：
								1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
								2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

			二、如何注册组件？
							1.局部注册：靠new Vue的时候传入components选项
							2.全局注册：靠Vue.component('组件名',组件)

			三、编写组件标签：
							<school></school>
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <studnet></studnet>
    <hr>
    <h1>{{msg}}</h1>

  </div>
  <script src="../js/vue.js" type="text/javascript">
    //第一步：创建school组件
    const school = Vue.extend({
      template: `
      <div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
      `,
      //	// el:'#root', //组件定义时，一定不要写el配置项，
      //因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
      data() {
        return {
          schoolName: '尚硅谷',
          address: '北京昌平'
        }
      },
      methods: {
        showName() {
          alert(this.schoolName)
        }
      }
    })
    //创建VM

    Vue.component('school', school)
    new Vue({
      el: '#root',
      data() {
        return {
          msg: '你好'
        }
      },
      //第二步注册组件
      components: {
        school
      }
    })
  </script>
</body>

</html>